<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>
		<body>
			<div class="" id="app">
				<div v-if="score>=90">优秀</div>
				<div v-else-if="score<90&&score>=80">良好</div>
				<div v-else-if="score<80&&score>=60">一般</div>
				<div v-else>较差</div>
				<!--    三个可自由搭配使用    -->
				<div v-show="flag">测试v-show</div>
				<button v-on:click="handle">切换</button>
				<!--     控制v-show的显示,原理就是v-sho控制元素样式是否显示   -->
			</div>

			<script type="text/javascript" src="js/vue.js"></script>
			<script type="text/javascript">
				var vm = new Vue({
					el: "#app",
					data: {
						score: 99,
						flag: false,
					},
					methods: {
						handle: function() {
							this.flag = !this.flag;
						}
					},
				});
			</script>
		</body>
</html>
